<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
        <style>
            .base{
                width:500px;
                height:150px;
                border:2px solid red;
            }
            .sad{
                border:2px solid #333;
                background-color: aliceblue;
            }
            .normal{
                border:2px solid rgb(74, 142, 221);
                background-color: rgb(76, 167, 212);
            }
            .happy{
                border:2px solid red;
                background-color: rgb(233, 104, 11);
            }

            .border{
                border:5px solid green;
            }
            .fs50{
                font-size: 50px;
            }
            .bgRed{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="demo">
            <h2>class 值是字符串</h2>
            <h3>心情</h3>
            <!-- 1. class 和 :class 同时存在，会用逗号隔开，都生效 -->
            <div class="base" :class="mood">普通</div>
            <div :class="str">高兴</div>

            <button @click="changeMood">切换心情</button>

            <h2>值是对象</h2>
            <div :class="obj">
                我是对象
            </div>
            <button @click="obj.border=!obj.border">边框</button>
            <button @click="obj.fs50=!obj.fs50">文字大小</button>
            <button @click="obj.bgRed=!obj.bgRed">背景</button>

            <h2>数组</h2>
            <div :class="classArr">
                我的值是数组
            </div>
            <input type="text" name="" id="" @keyup.enter="addClass">
        </div>
        <script>
            new Vue({
                el:'#demo',
                data: {
                    mood:'sad',
                    str:'base happy',
                    obj:{
                       border:false,
                       fs50:true,
                       bgRed:true
                    },
                    classArr:['base']
                },
                methods:{
                    changeMood(){
                        // sad  normal happy
                        let arr = ['sad', 'normal', 'happy']
                        let index = Math.floor(Math.random() * 3)
                        this.mood = arr[index]
                    },
                    addClass(e){
                        this.classArr.push(e.target.value)
                    }
                }
            })
        </script>
    </body>
</html>